<template>
	<view class="page">
		<view class="search-box">
			<view class="search-icon-wrapper">
				<image src="../../static/icos/search.png" class="search-icon"></image>
			</view>
			<input 
				confirm-type="search"
				@confirm="searchMe"
				type="text" 
				placeholder="搜索预告片" 
				maxlength="10"
				class="search-ipt"/>
		</view>
		
		<!-- 电影列表 -->
		<view class="movie-list page-block">
			<view class="poster-wrapper"  v-for="trailer in trailerList">
				<image :src="trailer.cover" 
						:data-trailerId="trailer.id"
						@click="showTrailerDetail"
						class="poster"></image>
			</view>
		</view>
		
		<!-- <view class="movie-list page-block">
			<view class="poster-wrapper">
				<image src="http://122.152.205.72:88/superhero/MARVEL/CaptainMarvel/cover.png" class="poster"></image>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				trailerList:[],
				keywords: "",
				page: 1,
				pageTotal: 1,
				pageSize: 15
			}
		},
		onReachBottom(){
			
			let keywords = this.keywords;
			let page = this.page + 1;
			let pageTotal = this.pageTotal;
			let pageSize = this.pageSize;
			// 判断，必须是当前页大于总页数，不发送请求
			if(page > pageTotal){
				return;
			}
			this.pageTrailerList(keywords,page,pageSize);
		},
		onLoad(){
			// this.loadMore();
			// loading
			uni.showLoading({
				mask: true,
				title: "请稍等..."
			})
			uni.showNavigationBarLoading();
			// 猜你喜欢
			uni.request({
				url: this.serverUrl+'/search/list?keywords=&page=&pageSize=15&'+this.visitKey, //仅为示例，并非真实接口地址。
				method:"POST",
				success: (res) => {
					// debugger;
					if(res.data.status === 200){
						this.trailerList = res.data.data.rows;
						this.page = res.data.data.page;
						this.pageTotal = res.data.data.total;
					}
				},
				complete:() => {
					uni.hideLoading();
					uni.hideNavigationBarLoading();
				}
			});
		},
		methods: {
			showTrailerDetail(e){//显示电影详情
				let trailerId = e.currentTarget.dataset.trailerid;
				// debugger;
				uni.navigateTo({
					url: '../movie/movie?trailerId='+trailerId,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
				
			},
			searchMe(e){//搜索
				let value = e.detail.value;
				this.trailerList = []; //搜索清空内容
				this.keywords = value; //保持搜索条件
				this.pageTrailerList(value, 1, this.pageSize);
			},
			pageTrailerList(keywords,page,pageSize){
				uni.showLoading({
					mask: true,
					title: "请稍等..."
				})
				uni.request({
					url: this.serverUrl+`/search/list?keywords=${keywords}&page=${page}&pageSize=${pageSize}&`+this.visitKey, //仅为示例，并非真实接口地址。
					method:"POST",
					success: (res) => {
						// debugger;
						if(res.data.status === 200){
							// this.trailerList = res.data.data.rows;
							// 合并,主要是为了复用于下拉加载更多
							this.trailerList = this.trailerList.concat(res.data.data.rows);
							this.page = res.data.data.page; // 当前页
							this.pageTotal = res.data.data.total; //总页数
						}
					},
					complete:() => {
						uni.hideLoading();
					}
				});
			}
		}
	}
</script>

<style>
@import url("search.css");
</style>
